<template>
  <div class="herin-select" :style="{ width: width*zoomFactor + 'px' }">
    <div
      ref="reference"
      v-show-tips
      tabindex="-1"
      class="herin-select-input"
      :style="{ height: height*zoomFactor + 'px' }"
      @blur="handleBlur"
      @click="handleClickSelect"
    >
      <div class="herin-select-placeholder">{{ currentLabel || placeHolder }}</div>
      <i class="icon-sanjiao" :class="[optionsShow ? 'active' : '']" />
    </div>
    <select-option
      v-if="optionsShow"
      :zoom-factor="zoomFactor"
      :width="width"
      :height="height"
      :options-height="optionsHeight"
      :options="options"
      :current-value="currentValue"
      @onPicker="onPicker"
    />
  </div>
</template>

<script>
import SelectOption from '@/components/herinselect/SelectOption.vue';
import '@/utils/showTips';
export default {
  name: 'HerinSelect',
  componentName: 'HerinSelect',
  components: { SelectOption },
  model: {
    prop: 'value',
    event: 'HerinSelectChange'
  },
  props: {
    value: {
      type: String,
      default: () => '',
      required: true
    },
    width: {
      type: Number,
      default: 80
    },
    height: {
      type: Number,
      default: 24
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    // 展示的options 条数 超过自动显示滚动条
    showOptionscount: {
      type: Number,
      default: () => 10
    },
    placeHolder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      optionsShow: false,
      timeoutId: null
    };
  },
  computed: {
    optionsHeight() {
      if (this.showOptionscount) {
        return (this.showOptionscount * this.height + 8) * this.zoomFactor + 'px';
      } else {
        return 'auto';
      }
    },
    currentValue() {
      return this.value;
    },
    currentLabel() {
      const value = this.currentValue;
      return value ? this.options.filter(option => option.value === value)[0].label : '';
    },
    zoomFactor() {
      // const htmlFontSize = document.getElementsByTagName('html')[0].style.fontSize;
      // const bodyFontSize = document.getElementsByTagName('body')[0].style.fontSize;
      // const fontSize = bodyFontSize || htmlFontSize;
      // return fontSize ? Number(fontSize.split('px')[0]) / 16 : 1;
      return window.ratio || 1;
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    // select的点击函数
    handleClickSelect() {
      if (this.optionsShow) {
        this.optionsShow = false;
      } else {
        // 展示options选项
        this.optionsShow = true;
      }
    },
    // // 选项的点击函数
    // handleClickOption(val) {
    //   const label = val.target.innerText;
    //   const option = this.options.filter(item => item.label === label)[0];
    //   if (option) {
    //     // 关闭options展示 并向父组件传值
    //     this.$emit('HerinSelectChange', option.value);
    //     this.handleClickSelect();
    //   }
    // },
    onPicker(val) {
      if (val) {
        // 关闭options展示 并向父组件传值
        this.$emit('HerinSelectChange', val);
        this.handleClickSelect();
      }
    },
    handleBlur() {
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }
      this.timeoutId = setTimeout(() => {
        this.optionsShow = false;
        this.timeoutId = null;
      }, 150);
    }
  }
};
</script>

<style lang="scss">
$secondaryTextColor: #A6ADB7; // 二级文字颜色
.icon-sanjiao {
  position: relative;
  top: .0625rem;
  display: inline-block;
  width: 0rem;
  height: 0rem;
  border-left: .3125rem solid transparent;
  border-right: .3125rem solid transparent;
  border-top: .3125rem solid $secondaryTextColor;
  margin-right: .375rem;
  transition: all 0.2s;
  &.active {
    transform: rotate(-180deg);
  }
}
.herin-select-options{
  position: absolute;
  left: 0 !important;
}
.herin-select {
  div:hover { cursor: pointer }
  cursor: pointer;
  position: relative;
  z-index: 100;
  width: 5rem;
  text-align: center;
  font-size: .75rem;
  &-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.5rem;
    box-sizing: border-box;
    // background-color: rgba(255, 255, 255, 0.1);
    border: .0625rem solid rgba(255, 255, 255, 0.2);
    border-radius: .25rem;
  }
  &-input:focus {
    outline: none;
  }
  &-placeholder {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 0.375rem;
    // color: $secondaryTextColor;
    color: #F8F8F8;
  }
  // &-options {
  //   overflow-y: auto;
  //   position: absolute;
  //   top: 1.8125rem;
  //   width: 5rem;
  //   padding: .25rem 0;
  //   box-sizing: border-box;
  //   color: #d9d9d9;
  //   background-color: rgba(0, 0, 0, 0.8);
  //   border: .0625rem solid rgba(255, 255, 255, 0.4);
  //   z-index: 100;
  //   &-item {
  //     height: 1.5rem;
  //     line-height: 1.5rem;
  //     color: #d9d9d9;
  //     &.active {
  //       color: rgba(46, 214, 230, 1);
  //       background-color: rgba(46, 214, 230, 0.2);
  //     }
  //   }
  //   &-item:hover {
  //     color: rgba(46, 214, 230, 1);
  //     background-color: rgba(46, 214, 230, 0.2);
  //   }
  // }
}
</style>
